<!-- src/components/CartFooter.vue -->
<template>
    <view class="w-full h-102rpx pos-fixed bottom-0 left-0 flex items-center px-25rpx bg-#fff" :class="{ 'z-[999]': !showDepreciate }">
      <view class="flex items-center">
        <view
          class="w-[42rpx] h-[42rpx] rounded-[2048rpx] radio leading-[42rpx] text-center shrink-0"
          :class="{ active: selectAll }"
          @click="toggleSelectAll"
        >
          <wd-icon name="check" size="25rpx" color="#fff"></wd-icon>
        </view>
        <view class="ml-10rpx text-25rpx font-600">Select All</view>
      </view>
      <view class="flex-1">
        <view class="flex justify-end items-center">
          <view class="h-75rpx flex flex-col justify-between mr-20rpx">
            <view class="flex items-end justify-end">
              <view class="text-25rpx font-600 mr-10rpx">Total:</view>
              <view class="text-33rpx font-600">${{ totalPrice }}</view>
            </view>
            <view class="flex items-end">
              <view class="color-#7B7B7B text-21rpx mr-10rpx">{{ selectedItemCount }} Item Selected</view>
              <view
                class="px-8rpx h-33rpx leading-33rpx bg-#FFF4EE color-#FF4600 rounded-996rpx text-21rpx"
                @click="openDetails"
                v-if="activeIndex.length"
              >
                $8 Off 
                <wd-img
                  :width="'21rpx'"
                  :height="'21rpx'"
                  src="/static/store/chevron-down@2x.png"
                  class="mr-20rpx"
                  :class="{ 'rotate-180': showDetails }"
                />
              </view>
            </view>
          </view>
          <view
            class="w-213rpx h-75rpx rounded-996rpx bg-#FF4600 text-center leading-75rpx color-#ffffff text-25rpx font-400"
            @click="goToCheckout"
          >
            Go to checkout
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script lang="ts" setup>

  const props = defineProps({
    activeIndex: {
      type: Array as () => number[],
      required: true,
    },
    productList: {
      type: Array as () => any[],
      required: true,
    },
    showDetails: {
      type: Boolean,
      required: true,
    },
    showDepreciate: {
      type: Boolean,
      required: true,
    },
  });
  
  const emit = defineEmits(['toggleSelectAll', 'openDetails', 'goToCheckout']);
  
  const selectAll = ref(false);
  
  const toggleSelectAll = () => {
    emit('toggleSelectAll', !selectAll.value);
  };
  
  const totalPrice = computed(() => {
    return props.activeIndex.reduce((total, index) => {
      return total + props.productList[index].product.price.currentPrice * props.productList[index].product.quantity;
    }, 0);
  });
  
  const selectedItemCount = computed(() => {
    return props.activeIndex.length;
  });
  
  watch(
    () => props.activeIndex,
    () => {
      selectAll.value = props.activeIndex.length === props.productList.length;
    },
    { deep: true },
  );
  
  const openDetails = () => {
    emit('openDetails', !props.showDetails);
  };
  
  const goToCheckout = () => {
    emit('goToCheckout');
  };
  </script>
  
  <style lang="scss" scoped>
  .radio {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1rpx solid #d0d5dd;
  }
  
  .active {
    background-color: #ff4600;
    border: none;
  }
  
  .rotate-180 {
    transition: transform 0.3s ease;
    transform: rotate(180deg);
  }
  </style>